<template>
	<view class="app-components-loader">
		<view class="app-components-loader__inner app-components-loader__inner--one" ></view>
		<view class="app-components-loader__inner app-components-loader__inner--two" ></view>
		<view class="app-components-loader__inner app-components-loader__inner--three" ></view>
		<view class="app-components-loader__logo e-flex-xy-center">
			<image :src="logo" class="img-36"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';


const logo = ref('');

// #ifdef MP-WEIXIN
let extConfig = wx.getExtConfigSync() ? wx.getExtConfigSync() : null;
if (extConfig !== null) {
	logo.value = extConfig.head_img;
}
// #endif
// #ifdef H5
logo.value = uni.getStorageSync('logo');
// #endif
// #ifdef APP
logo.value = `/static/${uni.getStorageSync('tenant')}.png`;
// #endif
</script>

<style scoped lang="scss">
@include appBem_b(components-loader) {
	position: relative;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	perspective: 800px;
	@include appBem_e(inner) {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border-color: var(--color-primary) !important;
		@include appBem_m(one) {
			left: 0%;
			top: 0%;
			animation: rotate-one 1s linear infinite;
			border-bottom: 3px solid #efeffa;
		}
		@include appBem_m(two) {
			right: 0%;
			top: 0%;
			animation: rotate-two 1s linear infinite;
			border-right: 3px solid #efeffa;
		}
		@include appBem_m(three) {
			right: 0%;
			bottom: 0%;
			animation: rotate-three 1s linear infinite;
			border-top: 3px solid #efeffa;
		}
	}
	@include appBem_e(logo) {
		position: absolute;
		width: 96rpx;
		height: 96rpx;
	}


	@keyframes rotate-one {
		0% {
			transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
		100% {
			transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

	@keyframes rotate-two {
		0% {
			transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
		100% {
			transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

	@keyframes rotate-three {
		0% {
			transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
		100% {
			transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}
}
</style>
